<template>
  <a-slider
    v-model:value="value1"
    :autofocus="autofocus"
    :disabled="disabled"
    :dots="dots"
    :get-tooltip-popup-container="getTooltipPopupContainer"
    :included="included"
    :mark="mark"
    :marks="marks"
    :max="max"
    :min="min"
    :range="range"
    :reverse="reverse"
    :step="step"
    :tip-formatter="tipFormatter"
    :tooltip-placement="tooltipPlacement"
    :tooltip-visible="tooltipVisible"
    :vertical="vertical"
    @afterChange="afterChange"
  >
    <!-- <slot /> -->
    <template v-if="$slots.mark" #mark="{ label, point }">
      <slot name="mark" :label="label" :point="point" />
    </template>
  </a-slider>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { Slider } from 'ant-design-vue'
export default defineComponent({
  name: 'ZSlider',
  components: {
    ASlider: Slider
  },
  props: {
    value: {
      type: [Number, Array],
      default: undefined
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    dots: {
      type: Boolean,
      default: false
    },
    getTooltipPopupContainer: {
      type: Function,
      default: undefined
    },
    included: {
      type: Boolean,
      default: true
    },
    mark: {
      type: Object,
      default: undefined
    },
    marks: {
      type: Object,
      default: undefined
    },
    max: {
      type: Number,
      default: 100
    },
    min: {
      type: Number,
      default: 0
    },
    range: {
      type: Boolean,
      default: false
    },
    reverse: {
      type: Boolean,
      default: false
    },
    step: {
      type: [Number, null],
      default: 1
    },
    tipFormatter: {
      type: [Function, null],
      default: undefined
    },
    tooltipPlacement: {
      type: String,
      default: undefined
    },
    tooltipVisible: {
      type: Boolean,
      default: undefined
    },
    vertical: {
      type: Boolean,
      default: false
    }
  },
  setup(props, _ref) {
    const value1 = computed({
      get() {
        return props.value
      },
      set(val) {
        _ref.emit('update:value', val)
      }
    })
    return {
      value1
    }
  },
  methods: {
    afterChange(value) {
      this.$emit('afterChange', value)
    }
  }
})
</script>
